<template>
  <div class="page_index">
    <nav-bar></nav-bar>
    <my-search></my-search>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
      <van-swipe-item v-for="item in imgs" :key="item.goods_id">
        <img :src="item.image_src" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- <van-grid :border="false">
      <van-grid-item v-for="(item, index) in cates" :key="index">
        <img :src="item.image_src" alt="" class="nav_img">
      </van-grid-item>
    </van-grid> -->
    <section class="box-img">
      <img v-for="(item, index) in cates" :key="index" :src="item.image_src" alt="" class="nav_img">
    </section>

    <ul>
      <li v-for="(item, index) in floordata" :key="index">
        <img :src="item.floor_title.image_src" class="tl_img">
        <section>
          <img v-for="(n, i) in item.product_list" :key="i" :src="n.image_src" alt=""
            :class="{ it_img: true, active: i > 0 }">
        </section>
      </li>
    </ul>

  </div>
</template>
<script>
import mySearch from '@/components/mySearch.vue';
// import axios from 'axios';
// import api from '../../api/index';
import { getSwiper, getfloor, getCate } from '../../api/home/index';
export default {
  components: { mySearch },
  data() {
    return {
      imgs: [], // 轮播图的数据
      cates: [], // 导航分类的数据
      floordata: [], // 楼层的数组
    }
  },
  created() {
    // axios.get('https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata').then(res => { // 轮播图的请求
    //   // console.log(res);
    //   this.imgs = res.data.message;
    // })

    // api.get('/public/v1/home/swiperdata', { params: { id: 10 } }).then(res => {
    //   this.imgs = res.message;
    //   // closeToast();
    // })

    getSwiper().then(res => {
      this.imgs = res.message;
    })

    // axios.get('https://api-hmugo-web.itheima.net/api/public/v1/home/catitems').then(res => { // 分类导航的请求
    //   // console.log(res);
    //   this.cates = res.data.message;
    // })

    // api.get('/public/v1/home/catitems').then(res => {
    //   this.cates = res.message;
    // })

    getCate().then(res => {
      this.cates = res.message;
    })
    // axios.get('https://api-hmugo-web.itheima.net/api/public/v1/home/floordata').then(res => { // 楼层的请求
    //   // console.log(res);
    //   this.floordata = res.data.message;
    // })
    // api.get('/public/v1/home/floordata').then(res => {
    //   this.floordata = res.message;
    // })

    getfloor().then(res => {
      this.floordata = res.message;
    })
  }
}
</script>
<style lang="scss" scoped>
.my-swipe {
  img {
    width: 100%;
    display: block;
  }
}

.nav_img {
  width: 100%;
}

.box-img {
  display: flex;
  background-color: #fff;
  padding: 15px;
  box-sizing: border-box;
  justify-content: space-between;

  img {
    width: 20%;
  }
}

.tl_img {
  width: 100%;
  margin: 10px 0;
}

.it_img {
  float: left;
  width: 30%;
  margin-right: 3%;
}

.active {
  height: 90px;
  margin-bottom: 10px;
}

.page_index {
  background-color: #fff;
}
</style>